<template>
<section>
  <swiper :auto="true" height="220px" :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
  <group :title="coffee.name" v-for="coffee  in product.coffees" :key="coffee.id">
    <cell v-if="coffee.transport&&coffee.transport.poe" title="出口港" :value="coffee.transport.poe"></cell>
    <cell v-if="coffee.transport&&coffee.transport.shippingTime" title="船运时间" :value="coffee.transport.shippingTime.split(' ')[0]"></cell>
    <cell v-if="coffee.transport&&coffee.transport.poi" title="进口港" :value="coffee.transport.poi"></cell>
    <cell v-if="coffee.transport&&coffee.transport.arrivalTime" title="抵达时间" :value="coffee.transport.arrivalTime.split(' ')[0]"></cell>
    <card :header="{title: '提单' }" v-if="coffee.transport.loadingBillImgKey">
      <img slot="content" style="max-width: 100%" class="card-padding" :src="coffee.transport.loadingBillImgKey" />
    </card>
    <card :header="{title: '原产地证' }" v-if="coffee.transport&&coffee.transport.cooImgKey">
      <img slot="content" style="max-width: 100%" class="card-padding" :src="coffee.transport.cooImgKey" />
    </card>
    <card :header="{title: '植物检验检疫证书' }" v-if="coffee.transport&&coffee.transport.piqcImgKey">
      <img slot="content" style="max-width: 100%" class="card-padding" :src="coffee.transport.piqcImgKey" />
    </card>
    <card :header="{title: 'ICO证书' }" v-if="coffee.transport&&coffee.transport.icoImgKey">
      <img slot="content" style="max-width: 100%" class="card-padding" :src="coffee.transport.icoImgKey" />
    </card>
    <card :header="{title: '品质证书' }" v-if="coffee.transport&&coffee.transport.qcImgKey">
      <img slot="content" style="max-width: 100%" class="card-padding" :src="coffee.transport.qcImgKey" />
    </card>
    <card :header="{title: '报关单' }" v-if="coffee.transport&&coffee.transport.customsDeclarationImgKey">
      <img slot="content" style="max-width: 100%" class="card-padding" :src="coffee.transport.customsDeclarationImgKey" />
    </card>
    <card :header="{title: '商检局卫生证' }" v-if="coffee.transport&&coffee.transport.hcbciImgKey">
      <img slot="content" style="max-width: 100%" class="card-padding" :src="coffee.transport.hcbciImgKey" />
    </card>
  </group>
</section>
</template>

<script>
import { Swiper, SwiperItem, Group, Cell, Card } from "vux";
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  components: {
    Swiper,
    SwiperItem,
    Group,
    Cell,
    Card
  },
  data() {
    return {
      demo01_index: 0,
      demo01_list: [
        {
          url: "javascript:",
          img: "/wap/static/swiper/1.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/2.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/3.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/4.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/5.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/6.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/7.jpg"
        }
      ]
    };
  },
  computed: {
    ...mapState({
      product: state => state.product
    })
  },
  methods: {
    toArea(index) {
      console.log(index);
      this.$router.push({
        path: "/area/" + this.$route.params.id + "/" + index
      });
    },
    demo01_onIndexChange(index) {
      this.demo01_index = index;
    }
  },
  created() {
    console.log(this.$route.params.id);
  }
};
</script>

<style scoped>
.weui-grid__label {
  color: #6c6c6c;
}

.fa {
  font-size: 36px;
  color: #04be02;
}

.weui-grid__icon {
  margin-bottom: 5px;
}

.vux-demo {
  text-align: center;
}

.logo {
  width: 100px;
  height: 100px;
}

.ximg-demo {
  width: 100%;
  height: auto;
}

.ximg-error {
  background-color: yellow;
}

.ximg-error:after {
  content: "加载失败";
  color: red;
}
</style>
